<template>
  <div>
    <h1>一扇新的大门正在徐徐展开</h1>
    <my-list :list="list">
      <template #default="{id}">
        <button @click="del(id)">删除</button>
      </template>
    </my-list>
    <my-list :list="goods">
      <template #default="{id}">
        <button>0元购</button>
        <button @click="delGoods(id)">删除</button>
      </template>
    </my-list>
  </div>
</template>

<script>
import MyList from './components/MyList.vue'
export default {
  components: { MyList },
  data() {
    return{
      list: [
        { id: 2, name: "关羽" },
        { id: 4, name: "张飞" },
        { id: 5, name: "赵云" },
        { id: 7, name: "黄忠" },
        { id: 8, name: "马超" },
      ],
      goods: [
        { id: 2, name: "方便面" },
        { id: 4, name: "鸡爪子" },
        { id: 5, name: "火腿肠" },
        { id: 7, name: "大辣条" },
        { id: 8, name: "卤鸡蛋" },
      ]
    }
  },
  methods:{
    del(id) {
      this.list = this.list.filter(item => item.id != id)
    },
    delGoods(id) {
      this.goods = this.goods.filter(item => item.id != id)
    } 
  }
}
</script>

<style>

</style>